<template>
	<div class="outter_div">
		<span class="title_span">图书捐赠</span>
		<div class="inner_div">
			<el-form ref='donation_form' :model='donation_form' :rules='rules' label-width="80px" size="medium">
				<el-form-item label='图书名称' prop='name'>
					<el-input v-model='donation_form.name' placeholder='请输入图书名称'></el-input>
				</el-form-item>
				<el-form-item label='ISBN' prop='ISBN'>
					<el-input v-model='donation_form.ISBN' placeholder='请输入图书背面条形码'></el-input>
				</el-form-item>
				<el-form-item label='书目类别'>
					<el-select v-model='donation_form.class' multiple placeholder='请选择' style='width: 100%;'>
						<el-option label='技术领域' value='1'></el-option>
						<el-option label='专业领域' value='2'></el-option>
						<el-option label='管理沟通' value='3'></el-option>
						<el-option label='其它' value='4'></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label='捐赠人' prop='man'>
					<el-input v-model='donation_form.man' placeholder='请输入'></el-input>
				</el-form-item>
				<el-form-item label='捐赠时间'>
					<el-date-picker v-model='donation_form.date' type='date' placehoder='选择日期' style='width: 100%;'></el-date-picker>
				</el-form-item>
				<el-form-item label='状态'>
					<el-radio-group v-model='donation_form.state'>
						<el-radio label='待入库'></el-radio>
						<el-radio label='在库'></el-radio>
						<el-radio label='外借'></el-radio>
						<el-radio label='遗失'></el-radio>
					</el-radio-group>
				</el-form-item>
				<span style="color: darkorange;font-size: 12px;">提醒：若选择“在库”状态的话，请确认已经将图书放置到1-5-10-N的书架上</span>
				<el-form-item style='margin-top: 20px;'>
					<el-button type='primary' @click="submitFun('donation_form')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			let checkName = (rule, name,callback) => {
				if (!name) return callback(new Error('名称不能为空'));
				setTimeout(() => {
					callback();
				}, 100);
			};
			let checkISBN = (rule,ISBN,callback) => {
				if (!ISBN) return callback(new Error('名称不能为空'));
				setTimeout(() => {
					callback();
				}, 100);
			};
			let checkMan = (rule, man,callback) => {
				if (!man) return callback(new Error('名称不能为空'));
				setTimeout(() => {
					callback();
				}, 100);
			};
			return {
				donation_form: {
					name: '',
					ISBN: '',
					class: '',
					man: '',
					date: '',
					state: ''
				},
				rules: {
					name: [{
						validator: checkName,
						trigger: 'blur'
					}],	
					ISBN: [{
						validator: checkISBN,
						trigger: 'blur'
					}],	
					man: [{
						validator: checkMan,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			submitFun: function(donation_form) {
				this.$refs[donation_form].validate((valid) => {
					if (valid) {
						this.$message.success('提交成功');
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
